<template>
  <div class="land">
    <MapView
      :key="defaultViewId"
      :viewerId="defaultViewId"
      @onload="onMapLoad"
      v-if="defaultViewId"
      @beforeDestroy="beforeMapDestroy"
    ></MapView>
    <mouseInfo></mouseInfo>
    <switchProp></switchProp>
    <Utool
      :t="[
        {
          title: '数据',
          icon: 'shujufuwu'
        },
        {
          title: '图层',
          icon: 'layerManage'
        }
      ]"
      :viewerId="defaultViewId"
    ></Utool>
    <imgSwitch></imgSwitch>
  </div>
</template>

<script setup>
import {
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue'
import MapView from '@/components/mapView'
import Utool from '@/components/utool/index-land'
import mouseInfo from '@/components/mapView/mouseInfo.vue'
import switchProp from '@/components/mapView/switchProp.vue'

import { getAction } from '@/utils/helper'
import { globalBaseMap } from '@/utils/basemap'
import { homePosition } from '@/utils/constant'
import cacheUtil from '@/utils/cache'
import { topicDefaultList } from '@/api/tree'
import oldBus from '@/utils/oldBus'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'
import imgSwitch from '@/components/imgSwitch/index.vue'

const mapViewer = {}
let _layerManager = null
const defaultViewId = ref('defaultViewId')
const cameraConfig = ref(null)
const onMapLoad = async function ({ id, viewer }) {
  const { toolManager, layerManager } = await getAction(id)
  mapViewer[id] = viewer
  _layerManager = layerManager
  globalBaseMap[id] =
    globalBaseMap[id] || toolManager.basemapManager
  setViewer(viewer)
  const baseMapList = await globalBaseMap[
    defaultViewId.value
  ].getBasemapList('')
  await globalBaseMap[defaultViewId.value].getBasemapList(
    'zhihuiguihua'
  )
  topicDefaultList('zhihuiguihua').then(async (res) => {
    if (res.success && res.data) {
      for await (const item of res.data.reverse()) {
        item.dataList = await getDataList(item.pkid)
        if (!item.dataList.length) {
          return
        }
        item.serviceUrl = item.dataList[0].serviceUrl
        item.signService = item.dataList[0].signService
        item.currentDataIndex = 0
        oldBus.$emit('showDataList', item)
        await _layerManager.addAsync(item)
      }
    }
  })
  // if (baseMapList.length >= 1) {
  //   globalBaseMap[defaultViewId.value].switchBasemap(1)
  // }
}
// 获取服务的地图服务列表
const getDataList = async (pkid) => {
  const list = []
  await retrieveDataServiceById({
    pageIndex: 1,
    pageSize: 999,
    serviceId: pkid
  }).then((res) => {
    if (res.success) {
      if (res.data && res.data.length) {
        // 将配置的数据列表赋给原始数据
        list.push(...res.data)
      } else {
        this.$message.warning('该服务未配置数据')
      }
    } else {
      this.$message.error(res.message || '服务数据查询失败')
    }
  })
  return list
}
const cameraMovedByNavigation = ref(false)
// 设置视角
const setViewer = (viewer) => {
  const cacheItem = cacheUtil.getItem('camera')
  if (cacheItem) {
    try {
      const config = JSON.parse(cacheItem)
      if (config.cameraHeight && config.centerPoint) {
        cameraConfig.value = config
      } else {
        cameraConfig.value = null
      }
    } catch (e) {
      console.error(e)
      cameraConfig.value = null
    }
  } else {
    cameraConfig.value = null
  }
  viewer.camera.flyTo({
    destination: cameraConfig.value
      ? Cesium.Cartesian3.fromDegrees(
          Number(
            cameraConfig.value.centerPoint.split(',')[0]
          ),
          Number(
            cameraConfig.value.centerPoint.split(',')[1]
          ),
          Number(cameraConfig.value.cameraHeight)
        )
      : homePosition.destination,
    orientation: homePosition.orientation
  })
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = true
  viewer.scene.globe.globeAlpha = 1
}
const beforeMapDestroy = (id) => {
  globalBaseMap[id] = null
  mapViewer[id] = null
}
onUnmounted(() => {
  globalBaseMap['defaultViewId'] = null
  mapViewer['defaultViewId'] = null
})
onMounted(() => {})
</script>

<style lang="scss" scoped>
.land {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
</style>
